const path =require('path')
// 导入在内存中生成德html页面的插件
// 只要是插件，都一定要放到plugins结点中
// 这个插件的两个作用
// 1. 自动在内存中根据指定页面生成一个内存的页面
// 2. 自动，把打包好的bundle.js追缴到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')

// 通过node中的模块操作，向外暴露了一个配置对象
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),// 入口 ，表示要使用webpack打包哪个文件
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js' //指定输出
    },
    devServer: { // 这是配置dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
        // --open --port 3000 --contentBase src --hot
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true

    },
    plugins: [
        new htmlWebpackPlugin({ // 创建一个在内存中生成html页面的插件
            template: path.join(__dirname,'./src/index.html'), // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面 
            filename: 'index.html' // 指定生成的页面的名称
        })
    ],
    module:{ // 这个节点，用于配置所有第三方模块加载器
        rules: [ //所有第三方模块的匹配规则
            { test: /\.css$/,use: ['style-loader','css-loader']}, // 配置处理 .css文件的第三方loader规则
            { test: /\.less$/,use: ['style-loader','css-loader','less-loader']},// 这是配置处理.less的第三方loader规则
            { test: /\.scss$/,use: ['style-loader','css-loader','sass-loader']}, // 配置处理.sass文件
        ]
    }
}


// 当我们在控制台，直接输入webpack命令的时候，webpack做了以下几步：
// 1. 首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口
// 2. webpack就会去项目的根目录，查找一个叫做‘webpack.config.js’的配置文件
// 3. 当找到配置文件之后，webpack会去解析这个配置文，当解析执行完配置文件之后，就得到了配置文件中，导出的配置对象
// 4. 当webpack拿到配置对象后，就拿到了 配置对象中，指定的入口 和出口，然后进行打包构建


// 使用webpack-dev-server 这个工具，来实现自动打包编译的功能
// 1. 运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2. 安装完毕后，这个工具的用法，和webpack命令的用法完全一样
// 3. 由于在项目本地安装的webpack-dev-server，所以我们无法把它当做脚本命令在cmd中运行；(只有安装到全局的工具，才能在终端正常运行)
// 4. 注意：webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack
// 5. webpack-dev-server 帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上，而是直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的bundle.js
// 6. 我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了项目的根目录中，虽然我们看不到他，但是，可以认为，和dist src node_modules 平级，有一个看不见的文件，叫做bundle.js